<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<div id="app">
		<form action="/xxx" @submit.prevent="handlesSubmit">
			<span>用户名:</span><input type="text" v-model="username" /></br>
			<span>密码:</span><input type="password" v-model="pwd" /></br>
			<span>性别:</span>
			<input type="radio" id="male" value="男" v-model="sex" />
			<label for="male">男</label>
			<input type="radio" id="female" value="女" v-model="sex" />
			<label for="female">女</label>
			</br>
			<span>爱好:</span>
			<input type="checkbox" id="basket" value="basket" v-model="likes" />
			<label for="basket">篮球</label>
			<input type="checkbox" id="foot" value="foot" v-model="likes" />
			<label for="foot">足球</label>
			<input type="checkbox" id="pingpang" value="pingpang" v-model="likes" />
			<label for="pingpang">乒乓</label>
			</br>
			<span>城市:</span>
			<select v-model="cityId">
				<option value="">未选择</option>
				<option :value="city.id" v-for="(city,index) in citys" :key="index">{{city.name}}</option>
			</select>
			</br>
			<span>介绍:</span>
			<textarea rows="10" v-model="desc"></textarea>
			</br>
			</br>
			<input type="submit" value="注册" />
		</form>
	</div>
	<script src="../vue.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
				username:'',
				pwd:'',
				sex:'女', // 默认选中女
				likes:['foot'], // 默认选中足球
				citys:[{id:1,name:'广东'},{id:2,name:'上海'},{id:3,name:'四川'}],
				cityId:'3', // 收集选中的城市id,也可设默认城市id
				desc:''
			},
			methods: {
				handlesSubmit() {
					console.log(this.username,this.pwd,this.sex,this.likes,this.cityId,this.desc)
				}
			}
		});
	</script>
</body>
</html>